<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>动画过渡效果</title>
    <link rel="shortcut icon" type="image/x-icon" href="/bigyi/icon.png">
    <style>
    div.body {
        width: 900px;
    }
    
    div.trans {
        position: absolute;
        top: 100px;
        left: 100px;
        opacity: 0.5;
        width: 100px;
        height: 100px;
        float: left;
    }
    
    input.buttn {
        float: left;
        position: relative;
        top: 30px;
    }
    
    div.dbody {
        width: 300px;
        height: 100px;
        background-color: #0ff;
        opacity: 0.7;
        position: absolute;
        top: 340px;
        font-size: 30px;
    }
    
    div.rbody {
        width: 300px;
        height: 440px;
        background-color: #ddd;
        float: left;
        position: relative;
    }
    /*----------------------------------------------------------------------------*/
    
    div#trans1 {
        background-color: blue;
        transition-duration: 1s, 1s, 1s, 1s, 1s;
        transition-property: width, height, transform, background-color, opacity;
    }
    
    div#trans1:hover {
        width: 150px;
        height: 150px;
        transform: rotate(180deg);
        background-color: red;
        opacity: 0.2;
    }
    
    div.trans1_2 {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
        animation: myfirst 5s;
        animation-iteration-count: infinite;
        /*播放次数.无限循环*/
    }
    
    @keyframes myfirst {
        0% {
            background: red;
            left: 0px;
            top: 0px;
        }
        25% {
            background: yellow;
            left: 200px;
            top: 0px;
        }
        50% {
            background: blue;
            left: 200px;
            top: 200px;
        }
        75% {
            background: green;
            left: 0px;
            top: 200px;
        }
        100% {
            background: red;
            left: 0px;
            top: 0px;
        }
    }
    /*一下部分用js写一个和tran2同样效果实现但 是有意思的是颜色并不一样，opacity都是0.5没有变化----------------------------------*/
    
    div#trans2 {
        background-color: blue;
        display: block;
    }
    /*-----------------------trans2div--------------------*/
    
    #trans3 {
        background-color: pink;
    }
    </style>
    <script>
    function t2overchange(argument) {
        var otrans2 = document.getElementById("trans2");
        otrans2.style.width = "150px";
        otrans2.style.height = "150px";
        otrans2.style.background = "red";
        otrans2.style.transform = "rotate(45deg)";
        /* 这里用45度 ，因为js变化我不会写时间， 180度看不出变化*/
    }

    function t2outchange(argument) {
        var otrans2 = document.getElementById("trans2");
        var otrans2 = document.getElementById("trans2");
        otrans2.style.width = "100px";
        otrans2.style.height = "100px";
        otrans2.style.background = "blue";
        otrans2.style.transform = "rotate(0deg)"; // body...
    }

    function t2btn(argument) {
        var otrans2 = document.getElementById("trans2");
        if (otrans2.style.display == "none") {
            otrans2.style.display = "block "
        } else {
            otrans2.style.display = "none"
        };
    } /* trans2 动画结束---------------------------------------------------------*/
    /*trans3动画 用js改变backgroundcolor 用函数写-------------------------------------*/
    function getcolor(color) {
        var otrans3 = document.getElementById("trans3");
        otrans3.style.background = color; // body...
    }
    </script>
</head>

<body>
    <div class="body">
        <div class="rbody">
            <div class="trans" id="trans1"></div>
            <div class="trans1_2"></div>
            <div class="dbody">用css3写动画效果</div>
        </div>
        <!--左边用css3写 -->
        <div class="rbody">
            <div id="trans2" class="trans" onmouseover="t2overchange()" onmouseout="t2outchange()"></div>
            <input id="t2btn" type="button" class="buttn" value="显示/隐藏" onclick="t2btn()"></input>
            <div class="dbody">用js写变化效果 右边按钮是用js 用if函数写</div>
        </div>
        <div class="rbody">
            <div id="trans3" class="trans"></div>
            <input type="button" name="t3red" value="红色" class="buttn" onclick="getcolor('red')"></input>
            <input type="button" name="t3green" value="绿色" class="buttn" onclick="getcolor('green')"></input>
            <input type="button" name="t3bule" value="蓝色（用#00f" class="buttn" onclick="getcolor('#00f')"></input>
            <input type="button" name="t3none" value="无色（尝试去除bgc属性）" class="buttn" onclick="getcolor('')"></input>
            <div class="dbody" style="font-size:20px;">用js控制div颜色变化 最后一个没有成为无色，而是原来的颜色。
            </div>
        </div>
    </div>
</body>

</html>
